@charset "utf-8";
/**
 * Created by kroyo on 2017/12/13.
 * upload-case.html  
 */

@import 'common/mixincommon';







.main{
    background-color: $f2;
    padding-bottom: r(150px);
    .main-title{
        width: 100%;
        height: r(120px);
        padding: 0 r(32px);
        font-size: r(28px);
        color: #ffffff;
        padding-top: r(14px);
        background-color: $acolor;
        i{
            font-size: r(36px);
        }
    }
    .main-section{
        position: relative;
        width: 100%;
        background-color: #fff;
        padding: 0 r(32px) r(30px);
        margin-top: r(20px);
    }
    .section-close{
        position: absolute;
        top: r(30px);
        right: r(32px);
        width: r(28px);
        height: r(28px);
        background: url(../img/icon-close-gray.png) no-repeat center;
        background-size: 100%;
    }
    .section-item{
        width: 100%;
        .item-label{
            width: 100%;
            height: r(86px);
            line-height: r(86px);
            font-size: r(28px);
            color: $s3;
        }
        .inputtext{
            width: 100%;
            height: r(80px);
            border: 1px solid $borcolor;
            @include borradius(r(4px));
            padding: 0 r(20px);
            font-size: r(28px);
            color: $s6;
            @include inputplace($sc);
        }
        .upimg-btn{
            display: block;
            width: r(300px);
            height: r(80px);
            line-height: r(80px);
            border: 1px solid $acolor;
            @include borradius(r(4px));
            font-size: r(28px);
            color: $acolor;
            text-align: center;
        }
        .item-tink{
            font-size: r(24px);
            color: $s9;
            margin: r(10px) 0 r(20px);
        }
    }
    .item-imglist{
        .img-wrap{
            position: relative;
            float: left;
            width: r(300px);
            height: r(160px);
            overflow: hidden;
            text-align: center;
            margin-right: r(20px);
            margin-bottom: r(20px);
            img{
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
            }
            .shade{
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.5);
                z-index: 1;
                &:after{
                    position: absolute;
                    top: r(64px);
                    left: r(134px);
                    display: block;
                    content: '';
                    width: r(32px);
                    height: r(32px);
                    background: url(../img/icon-close.png) no-repeat center;
                    background-size: 100%;
                }
            }
        }
    }
    
    //添加案例
    .main-btn{
        margin-top: r(50px);
        padding: 0 r(32px);
        .main-addbtn{
            display: block;
            width: 100%;
            height: r(80px);
            line-height: r(80px);
            color: $acolor;
            font-size: r(32px);
            text-align: center;
            border: 1px solid $acolor;
            @include borradius(r(4px));
            background-color: transparent;
            &:before{
                display: inline-block;
                content: '';
                width: r(32px);
                height: r(32px);
                background-image: url(../img/icon-add-active.png);
                background-size: 100%;
                margin-right: r(22px);
                vertical-align: r(-5px);
            }
        }
    }
}









.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: r(30px) r(32px);
    background-color: $f2;
    z-index: 1;
    .btn{
        width: r(300px);
        height: r(90px);
        line-height: r(90px);
        @include borradius(r(45px));
        font-size: r(32px);
        text-align: center;
        @include box_shadows(0px,2px,10px,0px,rgba(0, 0, 0, 0.2));
    }
    .cancel-btn{
        float: left;
        color: $red;
        background-color: #ffffff;
    }
    .confirm-btn{
        float: right;
        color: #ffffff;
        background-color: $acolor;
    }
}










//单选按钮
.radio-wrap{
    display: inline-block;
    input{
        display: none;
    }
    label{
        font-size: r(28px);
        color: $s6;
        vertical-align:middle; 
        @include transitions(.4s);
    }
    .check{
        position: relative;
        display: inline-block;
        width: r(36px);
        height: r(36px);
        margin-right:r(20px); 
        vertical-align:r(-6px); 
        &:before{
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            content: '';
            width: 100%;
            height: 100%;
            border: 1px solid #ddd;
            @include borradius(50%);
            box-sizing: border-box;
            @include transitions(.4s);
        }
    }
    input:checked~label{
        .check{
            background:url(../img/icon-checked.png) no-repeat center; 
            background-size:100%; 
            &:before{
                border-color:$acolor;
            }
        }
    }
}